<template>
  <div class="spaceUsagePage">
    <h2>
      空间图库分析 -
      <span v-if="queryAll">全部空间</span>
      <span v-else-if="queryPublic">公共图库</span>
      <span v-else>
        <a :href="`/space/${spaceId}`" target="_blank">空间id：{{ spaceId }}</a>
      </span>
    </h2>
    <div style="margin-bottom: 16px"></div>
    <a-row :gutte="[16, 16]">
      <!--空间使用量分析-->
      <a-col :xs="24" :md="12">
        <SpaceUsageAnalyze :query-all="queryAll" :queryPublic="queryPublic" :spaceId="spaceId" />
      </a-col>
      <!--空间分类分析-->
      <a-col :xs="24" :md="12">
        <SpaceCategoryAnalyze :query-all="queryAll" :queryPublic="queryPublic" :spaceId="spaceId" />
      </a-col>
      <!--空间标签分析-->
      <a-col :xs="24" :md="12">
        <SpaceTagAnalyze :query-all="queryAll" :queryPublic="queryPublic" :spaceId="spaceId" />
      </a-col>
      <!--空间图片大小分析-->
      <a-col :xs="24" :md="12">
        <SpaceSizeAnalyze :query-all="queryAll" :queryPublic="queryPublic" :spaceId="spaceId" />
      </a-col>
      <!--空间用户分析-->
      <a-col :xs="24" :md="12">
        <SpaceUserAnalyze :query-all="queryAll" :queryPublic="queryPublic" :spaceId="spaceId" />
      </a-col>
      <!--空间使用量排行-->
      <a-col :xs="24" :md="12">
        <SpaceRankAnalyze
          v-if="isAdimn()"
          :query-all="queryAll"
          :queryPublic="queryPublic"
          :spaceId="spaceId"
        />
      </a-col>
    </a-row>
  </div>
</template>
<script setup lang="ts">
import SpaceUsageAnalyze from '@/components/analyze/SpaceUsageAnalyze.vue'
import SpaceCategoryAnalyze from '@/components/analyze/SpaceCategoryAnalyze.vue'
import SpaceTagAnalyze from '@/components/analyze/SpaceTagAnalyze.vue'
import SpaceSizeAnalyze from '@/components/analyze/SpaceSizeAnalyze.vue'
import SpaceUserAnalyze from '@/components/analyze/SpaceUserAnalyze.vue'
import SpaceRankAnalyze from '@/components/analyze/SpaceRankAnalyze.vue'
import { useRoute } from 'vue-router'
import { computed } from 'vue'
import { useLoginUserState } from '@/stores/useLoginUserState.ts'

const route = useRoute()
const queryAll = computed(() => !!route.query?.queryAll)
const queryPublic = computed(() => !!route.query?.queryPublic)
const spaceId = computed(() => route.query?.spaceId as string)

const userState = useLoginUserState()
const loginUser = userState.loginUser
const isAdimn = () => {
  return loginUser?.userRole === 'admin'
}
</script>

<style scoped></style>
